Angular Material এর MatTable কম্পোনেন্ট একটি শক্তিশালী টেবিল কম্পোনেন্ট যা ডেটাকে সুশৃঙ্খলভাবে এবং পেশাদারভাবে প্রদর্শন করতে সহায়তা করে। এটি একটি কাস্টমাইজযোগ্য এবং রেসপন্সিভ টেবিল তৈরি করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারী সহজেই ডেটা দেখতে এবং ইন্টারঅ্যাক্ট করতে পারে। MatTable কম্পোনেন্টে sorting, pagination, filtering, এবং অন্যান্য ইউজার ইন্টারঅ্যাকশন ফিচার অন্তর্ভুক্ত করা যেতে পারে।

Material Table এর বৈশিষ্ট্য

• Sorting: টেবিলের কলামগুলো সাজানোর সুবিধা।
• Pagination: টেবিলের ডেটা পেজিংয়ের মাধ্যমে বিভক্ত করা।
• Filtering: টেবিলের ডেটা অনুসন্ধান বা ফিল্টার করার সুবিধা।
• Expandable Rows: টেবিলের সারিগুলো এক্সপ্যান্ড করার সুবিধা (অথবা ডিটেইল ভিউ দেখতে)।
• Responsive: ছোট স্ক্রীনে স্বয়ংক্রিয়ভাবে টেবিলের কন্টেন্ট মানিয়ে নেয়।

Material Table তৈরি করা

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule মডিউলগুলো আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule
  ]
})
export class AppModule {}

২. টেবিল কম্পোনেন্ট তৈরি করা

MatTable কম্পোনেন্টে ডেটা প্রদর্শন করার জন্য একটি dataSource অ্যারে এবং কিছু কলাম ডিফাইন করতে হবে। প্রতিটি কলামের জন্য mat-header-cell এবং mat-cell ব্যবহার করা হয়।

উদাহরণ:

<table mat-table [dataSource]="dataSource" matSort>
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
    <td mat-cell *matCellDef="let element">{{element.id}}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <!-- Age Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Age</th>
    <td mat-cell *matCellDef="let element">{{element.age}}</td>
  </ng-container>

  <!-- Table Header and Row -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে:

• matColumnDef: এটি একটি কলামের ডিফিনিশন। id, name, এবং age হলো তিনটি কলামের উদাহরণ।
• mat-sort-header: এই ডিরেকটিভটি টেবিলের কলামগুলো সোর্ট করার জন্য ব্যবহৃত হয়।
• mat-header-cell: কলামের হেডারে ডেটা প্রদর্শন করার জন্য।
• mat-cell: কলামের ডেটা প্রদর্শন করার জন্য।

৩. ডেটা এবং ডেটা সোর্স (DataSource) কনফিগার করা

MatTable কম্পোনেন্টে ডেটা প্রদর্শন করার জন্য একটি ডেটা সোর্স তৈরি করতে হয় এবং কলামগুলো নির্ধারণ করতে হয়।

import { Component } from '@angular/core';

@Component({
  selector: 'app-basic-table',
  templateUrl: './basic-table.component.html',
})
export class BasicTableComponent {
  displayedColumns: string[] = ['id', 'name', 'age'];
  dataSource = [
    {id: 1, name: 'John', age: 25},
    {id: 2, name: 'Jane', age: 30},
    {id: 3, name: 'Alex', age: 35},
    {id: 4, name: 'Chris', age: 40},
  ];
}

এখানে:

• displayedColumns: এটি একটি অ্যারে যা টেবিলের কলামগুলো ধারণ করে এবং এটি HTML টেমপ্লেটে ব্যবহৃত হয়।
• dataSource: এটি টেবিলের ডেটা। এখানে একটি স্থির অ্যারে ব্যবহার করা হয়েছে, তবে আপনি এখানে ডাইনামিক ডেটাও ব্যবহার করতে পারেন।

৪. Pagination এবং Sorting যোগ করা

MatPaginator এবং MatSort মডিউল যোগ করে আপনি টেবিলের জন্য pagination এবং sorting যোগ করতে পারেন।

Pagination যোগ করা

<mat-paginator [length]="dataSource.length" [pageSize]="5"></mat-paginator>

এখানে:

• length: টেবিলের মোট ডেটার সংখ্যা।
• pageSize: প্রতিটি পেজে প্রদর্শিত আইটেমের সংখ্যা।

Sorting যোগ করা

<table mat-table [dataSource]="dataSource" matSort>
  <!-- Column Definitions (as shown above) -->
</table>

৫. Filtering (ফিল্টারিং) যোগ করা

টেবিলের ডেটা ফিল্টার করার জন্য matInput এবং MatTableDataSource ব্যবহার করা হয়।

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

import { MatTableDataSource } from '@angular/material/table';

export class BasicTableComponent {
  displayedColumns: string[] = ['id', 'name', 'age'];
  dataSource = new MatTableDataSource([
    {id: 1, name: 'John', age: 25},
    {id: 2, name: 'Jane', age: 30},
    {id: 3, name: 'Alex', age: 35},
    {id: 4, name: 'Chris', age: 40},
  ]);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

এখানে:

• applyFilter(): এটি ডেটা সোর্সের ফিল্টারিং অ্যাপ্লাই করার জন্য ব্যবহার করা হয়।

Angular Material Table একটি শক্তিশালী এবং কাস্টমাইজযোগ্য টেবিল কম্পোনেন্ট যা sorting, pagination, এবং filtering সহ বিভিন্ন ফিচার প্রদান করে। এটি সহজেই MatTableModule, MatPaginatorModule, MatSortModule, এবং MatInputModule মডিউলগুলির মাধ্যমে ব্যবহার করা যায়। Angular Material Table দিয়ে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য উপযোগী করে তুলতে পারেন।